<script setup>
import { ref, defineExpose, reactive } from 'vue'
import MyIcon from '@/components/my-icon/index.vue'
import EditImg from '../edit/welcome/editImg.vue'
import EditLink from '../edit/welcome/editLink.vue'
import EditMiniprogram from '../edit/welcome/EditApplet.vue'
import { toRaw } from '@vue/reactivity'
import { friendWelcomeAdd } from '@/api'

// import EditWelcome from './welcome/welcome.vue'

const isRefresh = ref(true)
const dialogVisible = ref(false)
const editWelcome = ref()
const deleteData1 =(index)=>{
  formRule.value.splice(index, 1)
}
const form = ref({
	rule: [{ id: '', isShow: true, name: '' }]
})
// 添加分段欢迎语
const formRule = ref([{
	name:'',
	welcome_other_data:[]
}])
const addInput = () => {
	formRule.value.push({ name: '',welcome_other_data:[] })
}
// 删除图标
const nextDown = (index) => {
	console.log(index)
	console.log('删除', formRule.value)
	formRule.value.splice(index, 1)
}
const emits = defineEmits(['goBack'])

const show = (val) => {
	console.log(val)
	dialogVisible.value = val
}
const cancel = () => {
	dialogVisible.value = false
	emits('goBack')
}

const rules = ref({
	name: [
		// { required: true, message: '请输入分组名称', trigger: 'blur' },
		// { min: 1, max: 18, message: '不得超过18个字', trigger: 'blur' }
	]
})

// 弹窗保存按钮
const selectStaffData = ref([]) //选择分组定义
const getChooseData = (val) => {
	var Type = toRaw(val)
	console.log('图片弹窗数据1', Type)
	selectStaffData.value = Type
	console.log('测试', selectStaffData.value)
	getDataByIds(selectStaffData.value)
}
var datalists = ref([])
const dataTypes = ref([])
const getDialogueData = (val) => {
	console.log(val,indexsvalue,datalists.value[indexsvalue.value])
	// var Lists = toRaw(val)
	if(editImgshow.value == 1){
		if(indexstype.value == false){
			datalists.value[indexsvalue.value]=val
		}else{
			datalists.value.push(val)
		}
		
		
	}else{
		console.log(editImgindex.value,formRule.value)
		if(indexstype.value == false){
			console.log(formRule.value[indexsvalue.value].welcome_other_data,indexvalue.value)
			formRule.value[indexvalue.value].welcome_other_data[indexsvalue.value]=val
		}else{
			formRule.value[editImgindex.value].welcome_other_data.push(val)
		}
	}
}
//添加欢迎语列表接口信息
const ruleFormRef = ref()
const dataapi = (val) => {
	var data = []
	for (var i = 0; i < val.length; i++) {
		data.push(val[i].id)
	}
	return data
}
// 保存按钮
const submit = () => {
	console.log('弹窗内容', dataapi(selectStaffData.value))
	console.log('测试', form.value.welcomeContent)
	if (dataapi(selectStaffData.value) == '') {
		ElMessage({ message: '请选择使用成员', type: 'error' })
		console.log('添加', selectStaffData.value)
	}
	if (form.value.welcomeContent == undefined) {
		ElMessage({ message: '欢迎语不能为空', type: 'error' })
		console.log('添加', form.value.welcomeContent)
	} else if (formRule.value.dayparting_status == 0) {
		console.log('关闭', formRule.value.dayparting_status)
		friendWelcomeAdd({
			adjunct_data: datalists.value, //关闭时所有数据
			staffer: dataapi(selectStaffData.value),
			content: form.value.welcomeContent,
			dayparting_status: formRule.value.dayparting_status
		}).then((res) => {
			console.log(res, '3333')
			ElMessage({ message: '新建欢迎语成功', type: 'success' })
			emits('goBack')
		})
		dialogVisible.value = false
		handleRefresh()
	} else {
		console.log('开启', formRule.value.dayparting_status,formRule.value)
		console.log('开启之后', formRule.value)
		const dataer = formRule.value
		friendWelcomeAdd({
			welcome_content: formRule.value.welcomeContents,
			adjunct_data: datalists.value, //关闭时的数据
			staffer: dataapi(selectStaffData.value),
			content: form.value.welcomeContent,
			dayparting_status: formRule.value.dayparting_status,
			// week_arr: options.value1,
			// startime: value2.value,
			// endtime: value3.value,
			// welcome_other_data: dataTypes.value,
			// dayparting_data: {
			// 	dayparting_status: formRule.value.dayparting_status,
			// 	welcomeContents: formRule.value.welcomeContents
			// } //开启时的数据
			dayparting_data:formRule.value
		}).then((res) => {
			console.log(res, '3333')
			ElMessage({ message: '新建欢迎语成功', type: 'success' })
			emits('goBack')
		})
		dialogVisible.value = false
		// handleRefresh()
	}
	// handleRefresh()
}
defineExpose({
	show
})
// 分组弹窗
const input = ref('')
const openingDialogName = ref('')
const chooseDialogue = ref()
const showDialogue = (name, title, index) => {
	console.log('弹窗', name)
	switch (name) {
		case 'staff':
			if (title == 'staffid') {
				openingDialogName.value = 'staffid'
				var arr = toRaw(form.value.staffid)

				chooseDialogue.value.show(name, dataArr)
			} else if (title == 'staffidTime') {
				openingDialogName.value = 'staffidTime'
				staff_dataIndex.value = index
				var arr = toRaw(staff_data.value)[index].selectstaffids
				console.log(arr, 'sdfdsf')

				chooseDialogue.value.show(name, dataArr)
			} else {
				openingDialogName.value = 'staff_standby'
				var arr = toRaw(form.value.staff_standby)

				chooseDialogue.value.show(name, dataArr)
			}
			break

		case 'tag':
			openingDialogName.value = name
			var arr = toRaw(form.value[name])
			var dataArr = []
			arr.forEach((item) => {
				dataArr.push(item)
			})
			chooseDialogue.value.show(name, dataArr)
			break
	}
}

// 删除按钮
const handleDele = (name, item, index) => {
	switch (name) {
		case 'staffidTime':
			var arr = toRaw(staff_data.value)
			arr.splice(index, 1)
			staff_data._value = arr
			break
		case 'staffid':
			var arr = selectStaffData.value
			arr.splice(index, 1)
			selectStaffData._value = arr
			var json = toRaw(form.value)
			// json[name].splice(index, 1)
			form._value = json
			break
		case 'staff_standby':
			var arr = selectstaff_standbyData.value
			arr.splice(index, 1)
			selectstaff_standbyData._value = arr
			var json = toRaw(form.value)
			// json[name].splice(index, 1)
			form._value = json
			break
		case 'tag':
			var arr = selectTagData.value
			arr.splice(index, 1)
			selectTagData._value = arr
			var json = toRaw(form.value)
			// json[name].splice(index, 1)
			form._value = json
			break
	}
	handleRefresh()
}
// 选择员工弹窗
const getDataByIds = (val) => {
	switch (val) {
		case 'staffid':
			console.log(val)
			selectStaffData._value = toRaw(form.value[val])
			console.log('根据ids获取已选员工列表', form.value[val], selectStaffData._value)
			break
		case 'staffidTime':
			console.log(form.value[val], '879789789')
			var arr = toRaw(staff_data.value)
			arr[staff_dataIndex.value].selectStaffData = form.value[val]
			staff_data._value = arr
			console.log('根据ids获取已选员工列表', staff_data.value)
			break
		case 'staff_standby':
			selectstaff_standbyData._value = [
				{
					id: 1,
					name: '21',
					avatar:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fec%2Fca%2Fd8%2Feccad87a334d082b8ff200ae01157e44.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639642180&t=2652a2445af742fc8a4bb6c8e4f18d1e',
					rbacName: '管理员'
				}
			]
			break
		case 'tag':
			selectTagData._value = [
				{
					id: 1,
					name: '21'
				}
			]
			break
	}
	handleRefresh()
}
// 强制刷新
const handleRefresh = () => {
	isRefresh.value = false
	isRefresh.value = true
}
const addClientName = () => {
	var json = form.value
	// json.welcomeContent += '客户昵称'
	// form._value = json
	// handleRefresh()
	if(json.welcomeContent){
		json.welcomeContent += '[插入客户昵称]'
		form._value = json
		handleRefresh()
	}else{
		json.welcomeContent = '' +  '[插入客户昵称]'
		form._value = json
		handleRefresh()
	}
}
const addClientNames = (val,index) => {
	// var json = form.value
	// json.welcomeContents += '用户昵称'
	// form._value = json
	// handleRefresh()
	
	if(formRule.value[index].welcome_content){
		formRule.value[index].welcome_content = formRule.value[index].welcome_content + '[插入客户昵称]'
	}else{
		formRule.value[index].welcome_content = '' + '[插入客户昵称]'
	}
}

// 添加附件部分
// 编辑基础信息页
const editImg = ref()
const editMiniprogram = ref()
const editLink = ref()
const value1 = ref('')
const options = [
	{
		value1: '1',
		label: '周一'
	},
	{
		value1: '2',
		label: '周二'
	},
	{
		value1: '3',
		label: '周三'
	},
	{
		value1: '4',
		label: '周四'
	},
	{
		value1: '5',
		label: '周五'
	},
	{
		value1: '6',
		label: '周六'
	},
	{
		value1: '7',
		label: '周日'
	}
]
const value2 = ref([])
const value3 = ref([])
const editImgshow=ref(1)
const editImgindex=ref(1)
// 点击添加附件按钮
const showDialog = (type, val,index) => {
	indexstype.value=true
	editImgshow.value=val
	openingDialogName.value = type
	console.log('图片', val)
	if(val == 2){
		editImgindex.value=index
	}
	// if(type == 1){
	// 	editImg.value.show(type, val)
	// }
	switch (type) {
		case '1':
			
			console.log('传入图片', val)
			editImg.value.show(type, val)
			break
		case '2':
			console.log('传入链接', type, val)
			editLink.value.show(type, val)
			break
		case '3':
			editMiniprogram.value.show(type, val)
			break
	}
}
// 选择分组删除按键
const deleteInput = (index) => {
	datalists.value.splice(index, 1)
}
const deleteData = (index) => {
	dataTypes.value.splice(index, 1)
}
const welcomeIndex = ref()
// 重新编辑
const showdatatype=ref()
const indexsvalue=ref()
const indexvalue=ref()
const indexstype=ref(true)
const popDown = (type, val,indexs,show,index) => {
	indexstype.value=false
	if(show == 2){  //代表是分时段欢迎语
		showdatatype.value=show
		indexsvalue.value=indexs
		indexvalue.value=index
	}else{
		showdatatype.value=show
		indexsvalue.value=indexs
	}
	console.log('测试结果', val)
	openingDialogName.value = type
	console.log('测试数据', openingDialogName.value)
	console.log('图片展示', type)
	// if (val != undefined) {
	// 	welcomeIndex.value = val
	// 	var obj = toRaw(datalists._value)[val]
	// 	var dataObj = {}
	// 	dataObj = deepClone(obj)
	// }
	switch (type) {
		case '1':
			if (val != undefined) {
				editImg.value.show(val)
			} else editImg.value.show()
			break
		case '2':
			if (val != undefined) {
				editLink.value.show(val)
			} else editLink.value.show()
			break
		case '3':
			if (val != undefined) {
				editMiniprogram.value.show(val)
			} else editMiniprogram.value.show()
			break
	}
}
</script>
<template>
	<div v-if="dialogVisible && isRefresh">
		<div class="app-back-tab">
			<div class="app-flex-left">
				<span class="back-box app-pointer" @click="cancel">
					<MyIcon class="app-icon" name="Back" />
					<span class="back-box-mr">返回</span>
				</span>
			</div>
		</div>
		<div class="app-edit app-gap-block-top">
			<div style="display: flex">
				<div>
					<div class="app-edit-title">
						<span class="app-edit-title-words">基础信息</span>
					</div>
					<el-tag
						style="width: 712px; margin-left: 56px; height: 50px; line-height: 20px"
						class="app-el-tag app-gap-margin-top"
						type="warning"
					>
						<MyIcon class="app-icon app-warning-font" name="Bell" />
						1、在渠道码处设置的欢迎语会被优先推送，如果成员在渠道码处设置了欢迎语，在此设置的欢迎语不会生效<br />

						<span style="margin-left: 16px"> 2、一个成员如果被设置了多个欢迎语，将会使用最新设置或修改的欢迎语</span>
					</el-tag>
					<div>
						<el-form ref="formRef" :model="form" :rules="rules">
							<el-form-item label="选择成员:" prop="name" style="margin-left: 75px; margin-top: 30px">
								<div @click="showDialogue('staff', 'staffid')">
									<el-input placeholder="请选择" size="large" v-model="input" clearable />
								</div>
							</el-form-item>
							<!-- 显示添加成员部分 -->
							<div v-if="isRefresh" style="margin-left: 150px">
								<span class="el-form-item__label" v-for="(select, index) in selectStaffData" :key="index">
									<span class="app-flex-left">
										<el-avatar class="cho-margin" shape="square" :size="30" :src="select.avatar" />
										<span class="app-gap-words-left">{{ select.name }}</span>
									</span>
									<!-- 删除按钮 -->
									<el-icon style="color: #606266" @click="handleDele('staffid', select, index)" :size="16" color="#999">
										<CircleClose />
									</el-icon>
								</span>
							</div>
						</el-form>
					</div>
				</div>
			</div>
			<!-- 发送欢迎语 -->
			<div class="app-edit-title" style="border-bottom: none;padding-bottom:0px">
				<span class="app-edit-title-words">发送欢迎语</span>
			</div>
			<div class="app-edit-body">
				<div class="app-flex-left-top">
					<div>
						<el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
							<el-form-item label="发送欢迎语:">
								<div v-if="isRefresh">
									<div>
										<div class="mes-name">消息内容:</div>
										<div class="app-warning-font app-pointer">
											<span @click="addClientName">[插入客户昵称]</span>
										</div>
										<div>
											<el-input
												:rows="15"
												@input="handleRefresh"
												class="app-max-width mes-field"
												v-model="form.welcomeContent"
												maxlength="600"
												placeholder="请输入"
												show-word-limit
												type="textarea"
											/>
										</div>
										<!-- 发送欢迎语添加附件部分内容 -->
										<div v-for="(item, index) in datalists" :key="index">
											<!-- 图片部分 -->
											<div
												style="display: flex; border: 1px solid #dcdfe6; justify-content: space-between"
												v-if="item.type == 1"
											>
												<div style="display: flex; align-items: center">
													<el-icon style="margin-left: 10px" @click="deleteInput(index)">
														<Remove />
													</el-icon>
													<span style="margin-left: 5px"> 【图片】: </span>
													<span> {{ item.title }} </span>
												</div>
												<div style="display: flex; align-items: center; margin-right: 5px">
													<el-icon @click="popDown('1',item,index,'1')"><Edit /></el-icon>
												</div>
											</div>
											<!-- 链接部分 -->
											<div
												style="display: flex; border: 1px solid #dcdfe6; justify-content: space-between"
												v-if="item.type == 2"
											>
												<div style="display: flex; align-items: center">
													<el-icon style="margin-left: 10px" @click="deleteInput(index)">
														<Remove />
													</el-icon>
													<span style="margin-left: 5px"> 【链接】: </span>
													<span> {{ item.title }} </span>
												</div>
												<div style="display: flex; align-items: center; margin-right: 5px">
													<el-icon @click="popDown('2',item,index,'1')"><Edit /></el-icon>
												</div>
											</div>
											<!-- 小程序部分 -->
											<div
												style="display: flex; border: 1px solid #dcdfe6; justify-content: space-between"
												v-if="item.type == 3"
											>
												<div style="display: flex; align-items: center">
													<el-icon style="margin-left: 10px" @click="deleteInput(index)">
														<Remove />
													</el-icon>
													<span style="margin-left: 5px"> 【小程序】: </span>
													<span> {{ item.title }} </span>
												</div>
												<div style="display: flex; align-items: center; margin-right: 5px">
													<el-icon @click="popDown('3',item,index,'1')"><Edit /></el-icon>
												</div>
											</div>
											<!-- 添加附件部分 -->
										</div>

										<el-popover
											popper-style="padding: 0px;min-width:0px"
											placement="right"
											:width="100"
											trigger="click"
										>
											<div>
												<div class="app-hover-cell app-hover-cell-left" @click="showDialog('1', '1')">
													<MyIcon class="app-icon" name="Pic" />
													<span class="app-gap-words-left-s"> 图片 </span>
												</div>
												<div class="app-hover-cell app-hover-cell-left" @click="showDialog('2', '1')">
													<MyIcon class="app-icon" name="LinkChain" />
													<span class="app-gap-words-left-s"> 链接 </span>
												</div>
												<div class="app-hover-cell app-hover-cell-left" @click="showDialog('3', '1')">
													<MyIcon class="app-icon" name="MiniProgram" />
													<span class="app-gap-words-left-s"> 小程序 </span>
												</div>
											</div>
											<template #reference>
												<span class="app-5-words app-pointer app-flex-left">
													<el-icon :size="17" class="app-pointer primary-font">
														<CirclePlus />
													</el-icon>
													<span class="app-no-wrap app-pointer primary-font app-gap-words-left-s"> 添加附件 </span>
												</span>
											</template>
										</el-popover>
										<Draggable
											v-model="drag"
											:list="welcomeOtherData"
											:animation="100"
											item-key="id"
											class="list-group"
											:forceFallback="true"
											ghost-class="ghost"
										>
											<template #item="{ element, index }">
												<div class="app-flex-2">
													<div class="app-flex-left">
														<span class="app-close-circle"> - </span>
														<span>
															【<span v-if="element['type'] == '1'">图片</span>
															<span v-else-if="element['type'] == '2'">链接</span>
															<span v-else-if="element['type'] == '3'">小程序</span>】:
														</span>
														<span class="app-gap-words-left-s">{{ element['title'] }}</span>
													</div>
													<MyIcon
														@click="showDialog(element['type'], index)"
														class="app-pointer app-icon"
														name="Edit"
													/>
												</div>
											</template>
										</Draggable>
									</div>
								</div>
							</el-form-item>
						</el-form>
					</div>
				</div>
				<!-- 添加分时段欢迎语部分 -->
				<div>
					<div>
						<el-form ref="formRef" :model="formRule" :rules="rules" label-width="140px">
							<el-form-item label="分时段欢迎语：">
								<div v-if="isRefresh">
									<div>
										<el-switch
											:active-value="1"
											:inactive-value="0"
											@change="handleRefresh"
											size="small"
											v-model="formRule.dayparting_status"
										/>
										<span class="app-switch-right-text">已{{ formRule.dayparting_status === 1 ? '开启' : '关闭' }}</span>
									</div>
									<div v-if="formRule.dayparting_status == 1">
										<el-tag class="app-el-tag" style="width: 500px; height: 70px; line-height: 20px">
											分时段欢迎语 ：1、员工上下班不同时间段可设置不同欢迎语；
											<div style="margin-left: 88px; margin-top: 10px">2、分时段之外的时间将发送渠道欢迎语。</div>
										</el-tag>
										<div class="app-flex-left-top" v-for="(item,index) in formRule" :key="index">
											<div style="margin-top: 20px; color: #606266">
												{{"时段" + (index + 1)}}:
												<div style="cursor:pointer;" @click="formRule.splice(index,1)"><el-icon><DeleteFilled /></el-icon></div>
											</div>
											<div class="welcomeStyle">
												<div class="mesname">
													<div>
														发送日期:
														<el-select v-model="item.week_arr" clearable multiple placeholder="请选择" style="width: 180px">
															<el-option
																v-for="item in options"
																:key="item.value1"
																:label="item.label"
																:value="item.value1"
															/>
														</el-select>
													</div>

													<div style="display: flex; margin-left: 30px">
														<el-time-picker 
														value-format="HH:mm:ss"
														format="HH:mm:ss"
														v-model="item.startime" placeholder="开始时间" style="width: 100px" /><span
															style="margin-left: 20px"
															>~</span
														>
														<el-time-picker
														value-format="HH:mm:ss"
															format="HH:mm:ss"
															v-model="item.endtime"
															arrow-control
															placeholder="结束时间"
															style="width: 100px; margin-left: 20px"
														/>
													</div>
													 <span style="color:#999;margin-left:20px" v-if="index!=0"><el-icon @click="deleteData1(index)" class="group-icon"><Delete /></el-icon
												></span>
												</div>
												<div class="app-warning-font app-pointer">
													<span @click="addClientNames(item.welcome_content,index)">[插入客户昵称]</span>
												</div>
												<div>
													<el-input
														:rows="20"
														@input="handleRefresh"
														class="app-max-width mes-field"
														v-model="item.welcome_content"
														maxlength="600"
														placeholder="请输入"
														show-word-limit
														type="textarea"
													/>
												</div>
												<!-- 时段欢迎语部分 -->
												<div v-for="(items, indexs) in item.welcome_other_data" :key="indexs">
													<!-- 图片部分 -->
													<div
														style="display: flex; border: 1px solid #dcdfe6; justify-content: space-between"
														v-if="items.type == 1"
													>
														<div style="display: flex; align-items: center">
															<el-icon style="margin-left: 10px" @click="deleteData(indexs)">
																<Remove />
															</el-icon>
															<span style="margin-left: 5px"> 【图片】: </span>
															<span> {{ items.title }} </span>
														</div>
														<div style="display: flex; align-items: center; margin-right: 5px">
															<el-icon @click="popDown('1',items,indexs,'2',index)"><Edit /></el-icon>
														</div>
													</div>
													<!-- 链接部分 -->
													<div
														style="display: flex; border: 1px solid #dcdfe6; justify-content: space-between"
														v-if="items.type == 2"
													>
														<div style="display: flex; align-items: center">
															<el-icon style="margin-left: 10px" @click="deleteData(indexs)">
																<Remove />
															</el-icon>
															<span style="margin-left: 5px"> 【链接】: </span>
															<span> {{ items.title }} </span>
														</div>
														<div style="display: flex; align-items: center; margin-right: 5px">
															<el-icon @click="popDown('2',items,indexs,'2',index)"><Edit /></el-icon>
														</div>
													</div>
													<!-- 小程序部分 -->
													<div
														style="display: flex; border: 1px solid #dcdfe6; justify-content: space-between"
														v-if="items.type == 3"
													>
														<div style="display: flex; align-items: center">
															<el-icon style="margin-left: 10px" @click="deleteData(index)">
																<Remove />
															</el-icon>
															<span style="margin-left: 5px"> 【小程序】: </span>
															<span> {{ items.title }} </span>
														</div>
														<div style="display: flex; align-items: center; margin-right: 5px">
															<el-icon @click="popDown('3',items,indexs,'2',index)"><Edit /></el-icon>
														</div>
													</div>
													<!-- 添加附件部分 -->
												</div>
												<el-popover
													popper-style="padding: 0px;min-width:0px"
													placement="right"
													:width="100"
													trigger="click"
												>
													<div>
														<div class="app-hover-cell app-hover-cell-left" @click="showDialog('1', '2',index)">
															<MyIcon class="app-icon" name="Pic" />
															<span class="app-gap-words-left-s"> 图片 </span>
														</div>
														<div class="app-hover-cell app-hover-cell-left" @click="showDialog('2', '2',index)">
															<MyIcon class="app-icon" name="LinkChain" />
															<span class="app-gap-words-left-s"> 链接 </span>
														</div>
														<div class="app-hover-cell app-hover-cell-left" @click="showDialog('3', '2',index)">
															<MyIcon class="app-icon" name="MiniProgram" />
															<span class="app-gap-words-left-s"> 小程序 </span>
														</div>
													</div>
													<template #reference>
														<span class="app-5-words app-pointer app-flex-left">
															<el-icon :size="17" class="app-pointer primary-font">
																<CirclePlus />
															</el-icon>
															<span class="app-no-wrap app-pointer primary-font app-gap-words-left-s"> 添加附件 </span>
														</span>
													</template>
												</el-popover>
												<Draggable
													v-model="drag"
													:list="welcomeOtherData"
													:animation="100"
													item-key="id"
													class="list-group"
													:forceFallback="true"
													ghost-class="ghost"
												>
													<template #item="{ element, index }">
														<div class="app-flex-2">
															<div class="app-flex-left">
																<span class="app-close-circle"> - </span>
																<span>
																	【<span v-if="element['type'] == '1'">图片</span>
																	<span v-else-if="element['type'] == '2'">链接</span>
																	<span v-else-if="element['type'] == '3'">小程序</span>】:
																</span>
																<span class="app-gap-words-left-s">{{ element['title'] }}</span>
															</div>
															<MyIcon
																@click="showDialog(element['type'], index)"
																class="app-pointer app-icon"
																name="Edit"
															/>
														</div>
													</template>
												</Draggable>
											</div>

											<div class="app-input-phone">
												<div class="app-phone-scroll">
													<div style="display: block">
														<div class="app-flex-left-top">
															<div class="app-avatar" v-if="item.welcome_content">
																<MyIcon class="app-white-font" name="Person" />
															</div>
															<div style="padding-left: 10px" :model="item.welcome_content">
																{{ item.welcome_content }}
															</div>
														</div>
														<div style="display: flex" v-for="(items, indexs) in item.welcome_other_data" :key="indexs">
															<div class="app-avatar">
																<MyIcon class="app-white-font" name="Person" />
															</div>
															<div style="display: flex; justify-content: space-between" v-if="items.type == 1">
																<div style="display: flex; align-items: center">
																	<span style="margin-left: 5px"> 【图片】: </span>
																	<span> {{ items.title }} </span>
																</div>
															</div>

															<div style="display: flex; justify-content: space-between" v-if="items.type == 2">
																<div style="display: flex; align-items: center">
																	<span style="margin-left: 5px"> 【链接】: </span>
																	<span> {{ items.title }} </span>
																</div>
															</div>

															<div style="display: flex; justify-content: space-between" v-if="items.type == 3">
																<div style="display: flex; align-items: center">
																	<span style="margin-left: 5px"> 【小程序】: </span>
																	<span> {{ items.title }} </span>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										
									</div>
									<div @click="addInput">
										<span class="app-5-words app-pointer app-flex-left">
											<el-icon :size="17" class="app-pointer primary-font">
												<CirclePlus />
											</el-icon>
											<span class="app-no-wrap app-pointer primary-font app-gap-words-left-s"> 添加分段欢迎语 </span>
										</span>
									</div>
									<div class="bottomStyle">
										注意: 1、新建欢迎语最多可发送1条文字消息和9个附件<br />

										2、文字消息和附件不能同时为空，当两者均填写时用户会收到多条消息<br />

										3、欢迎语将在客户加为好友后20秒内下发，因网络延迟可能造成发送不成功<br />
									</div>
								</div>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</div>
		<EditImg    @getDialogueData="getDialogueData($event, val)" ref="editImg" />
		<EditLink  @getDialogueData="getDialogueData($event, val)" ref="editLink" />
		<EditMiniprogram
			
			@getChooseData="getDialogueData($event, val)"
			ref="editMiniprogram"
		/>
		<ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
		<!-- <EditWelcome ref="editWelcome" :editForm="form"></EditWelcome> -->
		<div class="app-edit app-gap-block app-container app-flex-center">
			<el-button @click="cancel">取消</el-button>
			<el-button type="primary" @click="submit(ruleFormRef)">保存</el-button>
		</div>
	</div>
</template>
<style>
.app-phone-scroll {
	margin: 104px 20px 154px 26px;
	@include scrollBar;
	overflow: auto;
	height: calc(100% - 208px);
}
.mesname {
	display: flex;
	justify-content: flex-start;
	margin-top: 20px;
}
.welcomeStyle {
	padding: 20px;
	background-color: #fbfbfb;
	border: 1px solid #f3f3f3;
	margin-top: 20px;
}
.bottomStyle {
	background-color: #f7fcff;
	border: 1px solid #acd7ff;
	margin-top: 20px;
	padding: 20px;
}
</style>
